<!--suppress HtmlUnknownTarget -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>Mandomedia Add</title>

    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css"/>
</head>
<body class="bg-light col-sm-8 mx-auto col-lg-4">

<ul class="nav justify-content-end bg-white shadow-sm">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="/add">Add</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/show">Show</a>
    </li>
</ul>

<main class="row row-cols-1 mt-3">
    <section class="col">
        <div class="bg-white rounded-3 border p-3 shadow mx-3">
            <form name="man-form-add" action="/employee/add" onsubmit="return validateFormAdd()" method="post"
                  class="row g-2">
                <div class="input-group">
                    <label class="input-group-text bg-white col-4" for="man-dui">DUI:</label>
                    <!-- Value greater or equal 1 (Not negative numbers) -->
                    <input id="man-dui" type="number" class="form-control col-8" name="man-input-employee-dui" min="1"
                           required>
                </div>

                <div class="input-group">
                    <label class="input-group-text bg-white col-4" for="man-employee">Employee:</label>
                    <!-- Only letters -->
                    <input id="man-employee" type="text" class="form-control col-8" name="man-input-employee-name"
                           required>
                </div>

                <div class="input-group">
                    <label class="input-group-text bg-white col-4" for="man-salary">Salary:</label>
                    <!-- Value greater or equal to 908.526 (SMMLV) -->
                    <input id="man-salary" type="number" class="form-control col-8" oninput="updateLabels()"
                           name="man-input-employee-salary" min="1" required>
                </div>

                <div class="form-check ms-4">
                    <label class="form-check-label" for="man-active">Active</label>
                    <input class="form-check-input" type="checkbox" value="" id="man-active">
                </div>

                <div class="input-group">
                    <button type="reset" class="btn btn-danger">Cancel</button>
                    <button type="submit" class="btn btn-primary">Send</button>
                </div>
            </form>
        </div>
    </section>

    <section class="col mt-4 text-center">
        <div class="border bg-white mx-3 py-5 px-3 rounded-3 shadow">
            <div class="input-group">
                <p class="col-5 text-end">AFP (8%)</p>
                <p id="man-afp" class="col-7">COP 0</p>
            </div>

            <div class="input-group">
                <p class="col-5 text-end">ISSS (11%)</p>
                <p id="man-isss" class="col-7">COP 0</p>
            </div>

            <div class="input-group">
                <p class="col-5 text-end">Income (6%)</p>
                <p id="man-income" class="col-7">COP 0</p>
            </div>

            <div class="input-group border-top mt-2 pt-2">
                <p class="col-5 fw-bold text-end">Total</p>
                <p id="man-total" class="col-7 fw-bold">COP 0</p>
            </div>
        </div>
    </section>
</main>
<script src="../js/bootstrap/bootstrap.bundle.min.js"></script>
<script>
    function updateLabels() {
        const salary = document.getElementById('man-salary').value;
        const afp = salary * 0.08;
        const isss = salary * 0.11;
        const income = salary * 0.06;

        // @type {Intl.NumberFormat} The Intl.NumberFormat object enables language-sensitive number formatting.
        const numberFormat = new Intl.NumberFormat('co-ES', {style: 'currency', currency: 'COP'});

        document.getElementById('man-afp').innerText = numberFormat.format(afp);
        document.getElementById('man-isss').innerText = numberFormat.format(isss);
        document.getElementById('man-income').innerText = numberFormat.format(income);
        document.getElementById('man-total').innerText = numberFormat.format(afp + isss + income);
    }

    /**
     * Data validation is the process of ensuring that user input is clean, correct, and useful.
     *
     * The current mechanism of validation is Client side validation, the which is performed by
     * a web browser, before input is sent to a web server.
     *
     * @returns {boolean} True if the form is clean, correct and useful, false otherwise.
     */
    function validateFormAdd() {
        const nameEmployee = document.forms['man-form-add']['man-input-employee-name'].value;
        const salaryEmployee = document.forms['man-form-add']['man-input-employee-salary'].value;

        const onlyNames = /^[a-zA-Z ]*$/;

        if (!nameEmployee.match(onlyNames)) {
            alert('The name must be content only letters and spaces (not numbers).');
            // The form not is valid.
            return false;
        }

        if (salaryEmployee < 908526) {
            alert('The salary must be greater or equal to SMMLV (COP 908.526).');
            // The form not is valid.
            return false;
        }

        // The form has been validated and the information is true.
        return true;
    }
</script>
</body>
</html>